<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .cell{
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>角色列表</h3>
    <div id="app">
        <template>
            <el-table style="width: 100%"
                        :data="roles"
                        ref="roleTable"
                        @current-change="selectRole">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column label="id" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="角色" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="描述" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.description }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-popconfirm icon-color="red" title="确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)">
                            <el-button size="mini" icon="el-icon-delete" type="danger" slot="reference">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block" style="margin-top: 10px;">
                <el-pagination @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="page_size"
                               :page-size="4"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="count"
                               :background="back">
                </el-pagination>
            </div>
        </template>

        <el-button style="margin-top: 10px;" icon="el-icon-plus" size="mini" @click="dialogFormVisible = true">添加角色</el-button>

        <el-button style="margin-top: 10px;" icon="el-icon-plus" size="mini" @click="showTreeDialog">角色授权</el-button>

        <el-dialog title="角色操作" :visible.sync="dialogFormVisible" width="500px" @close="closeDialog()">
            <el-form :model="role">
                <el-form-item label="角色id">
                    <el-input v-model="role.id" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="role">
                <el-form-item label="角色名">
                    <el-input v-model="role.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="role">
                <el-form-item label="角色描述">
                    <el-input v-model="role.description" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveRole()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="角色授权" :visible.sync="dialogTreeVisible" width="500px" @close="">
            <el-tree
                    :data="functions"
                    show-checkbox
                    default-expand-all
                     node-key="id"
                    ref="tree"
                    highlight-current
                    :props="defaultProps"
                    @check="checkFun">
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogTreeVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                roles:[],
                // 当前页数
                currentPage: 1,
                // 订单总数
                count : 0,
                // 每页的数据
                page_size : [6,3],
                // 当前每页的数据
                pageSize : 6,
                // 分页背景
                back: true,
                role: {},
                // 修改角色模态框
                dialogFormVisible: false,
                // 权限模态框
                dialogTreeVisible: false,
                // 区分添加和更新角色
                flag: 0,
                // 当前选中的角色
                currentRole: null,
                // 用户的所有权限
                functions: [],
                // 配置子节点和节点的显示属性
                defaultProps:{
                    children: 'subFunctions',
                    label: 'name',
                }
            }
        },
        methods: {
            //添加、删除用户权限
            // fun当前选中的节点,current当前所有选中的节点
            checkFun(fun,current){
                // 看当前选中的节点中是否包含点击的节点
                if(current.checkedNodes.includes(fun)){
                    // 不包含的话就添加此节点
                    axios.post("/role-function",{roleId:this.currentRole.id,funId:fun.id})
                        .then(res => {
                            if(res.data === "ok"){
                                this.$message({
                                    type: 'success',
                                    message: '添加成功',
                                });
                            }
                        })
                }else{
                    // 包含的话就删除此节点
                    axios.delete("/role-function/" + this.currentRole.id + "/" + fun.id)
                        .then(res => {
                            if(res.data === "ok"){
                                this.$message({
                                    type: 'success',
                                    message: '删除成功',
                                });
                            }
                        })
                }
            },
            // 加载用户角色
            loadRoles(){
                axios.get("/roles/"+this.currentPage+"/"+this.pageSize)
                    .then(res => {
                        this.roles = res.data.data;
                        this.count = res.data.count;
                    })
            },
            // 加载所有权限
            loadFunctions() {
                axios.get("/functions")
                    .then(res => {
                        this.functions = res.data;
                    })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadRoles();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadRoles();
            },
            // 更新,添加角色
            saveRole() {
                if(this.flag == 0){
                    axios.post("/role", this.role)
                        .then(res => {
                            if(res.data == "ok"){
                                this.loadRoles();
                            }
                        });
                }else {
                    axios.put("/role", this.role)
                        .then(res => {
                            if(res.data == "ok"){
                                this.loadRoles();
                            }
                        });
                }
                this.loadRoles();
                this.dialogFormVisible = false;
            },
            // 通过id查询角色
            handleEdit(index, row) {
                this.flag = 1;
                axios.get("/role/" + row.id)
                    .then(res => {
                        this.role = res.data;
                    });
                this.dialogFormVisible = true;
            },
            // 删除角色
            handleDelete(index, row) {
                if(this.roles.length == 1){
                    this.currentPage = this.currentPage - 1;
                }
                axios.delete("/role/" + row.id)
                    .then(res => {
                        if(res.data == "ok"){
                            this.loadRoles();
                        }
                    });
            },
            // 选中的角色行
            selectRole(row){
                this.currentRole = row;
                //全部取消
                this.$refs.roleTable.clearSelection();
                //选中当前行
                this.$refs.roleTable.toggleRowSelection(this.currentRole);
            },
            //角色模态框
            showTreeDialog(){
                // 看是否选中角色
                if(this.currentRole){
                    this.dialogTreeVisible = true;
                    // 查询选中用户的权限
                    axios.get("/functions/" + this.currentRole.id)
                        .then(res => {
                            // 设置目前选中的子节点
                            this.$refs.tree.setCheckedNodes(res.data);
                        })
                }else {
                    this.$message("请选择角色");
                }
            },

            //清空修改角色模态框数据
            closeDialog() {
                this.flag = 0;
                this.role = {};
            },
        },
        mounted() {
            this.loadRoles();
            this.loadFunctions();
        }
    });
</script>
</html>